<template>
	<div class="mt-4" v-loading="data.mtloading">
		<el-form ref="formRef" :model="data.aliVerifyIdName" label-width="100px">
			<el-form-item :label="$t('public.verifyCode')">
				<el-input v-model="data.aliVerifyIdName.app_code" class="input_width"
					:placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit" v-if="dtasObj.config_id" v-prmis="'configs_update'">{{
					$t('public.ok') }}</el-button>
				<el-button type="primary" @click="onSubmit" v-prmis="'configs_add'" v-else>{{
					$t('public.ok') }}</el-button>
				<el-button @click="onCancel">{{ $t('public.cancel') }}</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { getconfig } from '@/api/system';
let emit = defineEmits(['infoData'])
let dtasObj = ref({})
let data = reactive({
	mtloading: true,
	config: {
		config_name: 'aliVerifyIdName',
		config_content: '',
		config_switch: 1,
		csr_id: 0,
		config_id: 0,
	},
	aliVerifyIdName: {
		app_code: '',
	}
})

// 获取信息
let getaliVer = () => {
	data.mtloading = true
	getconfig({ config_name: 'aliVerifyIdName' }).then(res => {
		data.mtloading = false
		console.log(res)
		if (res.state == 200) {
			let content = JSON.parse(res.data.config_content)
			for (let key in data.config) {
				data.config[key] = res.data[key]
			}
			data.aliVerifyIdName.app_code = content.app_code
			data.config.csr_id = res.data.creator
		}
	})
}

// 保存
let onSubmit = () => {
	let datas = {
		config_name: data.config.config_name,
		config_content: JSON.stringify(data.aliVerifyIdName),
		config_switch: data.config.config_switch,
		csr_id: data.config.csr_id
	}
	if (data.config.config_id != 0) {
		datas.config_id = data.config.config_id
	}
	dtasObj.value = datas
	emit('infoData', datas)
}

let onCancel = () => {
	getaliVer()
}

getaliVer()

// 暴露方法 方便父组件调用
defineExpose({
	getaliVer
})

</script>
<style lang="scss" scoped>
.input_width {
	width: 600px;
}
</style>